<template>
  <el-menu
    :style="{ width : isCollapse? '230px' : '64px' }"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="aside-container"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >
    <p class="login-lg">{{isCollapse? 'didi陪诊':'didi'}}</p>
    <treemenu :index="1" :menudata="menudata"></treemenu>
  </el-menu>
</template>

<script setup>

//拿到store实例
import treemenu from './treemenu.vue';
import {useRouter } from 'vue-router'
import { reactive, computed } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
//数据在router.options.routes[0].children
const menudata =reactive (router.options.routes[0].children)
const handleOpen = () => {};
const handleClose = () => { };
const isCollapse=computed(()=>store.state.menu.isclose)
</script>
<style lang="less" scoped>
.aside-container {
  height: 100%;
  .login-lg {
    font-size: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
}
</style>
